<template>
  <div class="title">
    <div class="title_top">预警统计</div>

    <div class="title_num">
      <div style="display: flex;justify-content: center;align-items: center;">
        <a-icon type="clock-circle" style="font-size: 32px;margin-right:10px;color:#cf3730;"/>
        <div class="title_num_item">
          <div class="title_num_item_top" v-text="collect.todoTotal"></div>
          <div class="title_num_item_bottom">待处置</div>
        </div>
      </div>
      <div style="display: flex;justify-content: center;align-items: center;">
        <a-icon type="issues-close" style="font-size: 32px;margin-right:10px;color:#3496fb;"/>
        <div class="title_num_item">
          <div class="title_num_item_top" v-text="collect.compleTotal"></div>
          <div class="title_num_item_bottom">已处置</div>
        </div>
      </div>
    </div>

    <a-tabs style="margin-top: 23px" v-model="activeKey" @change="changeTabs">
      <a-tab-pane key="1" tab="行为分类"></a-tab-pane>
    </a-tabs>
    <a-spin :spinning="loading">
      <div v-if="xAxisData && xAxisData.length > 0" class="echart" id="warnLineEcharts" :style="{ float: 'left', width: '100%', height: '350px' }"></div>
      <a-empty v-else style="margin-top:20px" />
    </a-spin>
  </div>
</template>

  <script>
  import * as echarts from 'echarts'
  import { APP_USER, APP_DEPT } from '@/store/mutation-types.js'
  import storage from 'store'
  import { getDisposalStatus, countCorrectCrime } from '@/api/home/apl_correct_statistic.js'
  import { findUserTree } from '@/api/base/ha_user'
  export default {
    name: 'LeftTop',
    data () {
      return {
        parentId: [], // 父节点id
        collect: {
          todoTotal: '-', // 待处置
          compleTotal: '-' // 已处置
        },
        activeKey: '1',
        yMax: 300,
        dataShadow: [],
        xAxisData: [],
        data: [],
        loading: false,
        currentUser: storage.get(APP_USER), // 登录人信息
        currentDept: storage.get(APP_DEPT) // 登录人部门
      }
    },
    async mounted () {
      this.getDisposalStatusList()
    },
    methods: {
      // 案件总数统计查询
      async getDisposalStatusList () {
        const res1 = await findUserTree('3601001000', { type: 1, isuser: false })
        if (res1.code == 0 && res1.data) {
          this.parentId = []
          this.recursionDeptid(this.parentId, this.currentDept.id, res1.data)
          const res = await getDisposalStatus(this.parentId)
          if (res.code == 0) {
              this.collect.todoTotal = res.data.pending
              this.collect.compleTotal = res.data.disposed
          }
          this.pending = res.data.pending
          this.disposed = res.data.disposed
          this.changeTabs('1')
        } else {
          this.$message.error(res1.msg)
        }
      },
      // 递归查询当前节点的id和他的下级id
      recursionDeptid (result, id, treeData, isSave = false) {
        treeData.map(v => {
          if (v.id == id || isSave) {
            result.push(v.id)
            this.recursionDeptid(result, id, v.children, true)
            return
          }
          if (v.children && v.children.length > 0) {
            this.recursionDeptid(result, id, v.children)
          }
        })
      },

      // 案件统计tab切换
      async changeTabs (key) {
        if (key == '1') {
          this.getCountCorrectCrime()
        }
      },
      async getCountCorrectCrime () {
        this.loading = true
				const res = await countCorrectCrime(this.parentId).finally(() => { this.loading = false })
        if (res.code == 0) {
          this.xAxisData = res.data.columnList.concat(res.data.columnList)
          this.data = res.data.valueList.concat(res.data.valueList)
          console.log(this.data)
          this.$nextTick(() => {
            this.initChart(this.xAxisData, this.data)
          })
        } else {
          this.xAxisData = []
          this.data = []
        }
			},
      initChart (xAxis, data) {
        const myChart = echarts.init(document.getElementById('warnLineEcharts')) // 图标初始化
				myChart.setOption({
					backgroundColor: '#fff', // 背景颜色
					legend: {
						show: false
					},
					grid: {
						left: '3.5%',
						right: '3.5%',
						top: '5%',
						bottom: '0%'
					},
					xAxis: [{
						splitLine: {
							show: false
						},
						type: 'value',
						show: false,
						axisLine: {
							// x轴坐标轴，false为隐藏，true为显示
							show: false
						}
					} ],
					yAxis: [{
							type: 'category',
							show: false,
							splitLine: {
								show: false
							},
							axisLine: {
								show: false
							},

							axisTick: {
								show: false
							},
							inverse: true,
							axisLabel: {
								color: '#bdbdbd',

								inside: true,
								verticalAlign: 'bottom',
								lineHeight: 25,
								margin: 80,
								show: true,
								fontSize: 14
							},
							data: xAxis
						},
						{
							type: 'category',
							inverse: true,
							axisTick: 'none',
							axisLine: 'none',
							show: true,
							axisLabel: {
								inside: true,
								verticalAlign: 'bottom',
								lineHeight: 17,
								// margin: 5,
								show: true,
								textStyle: {
									color: '#000',
									fontSize: 14
								}
							},
							data: data
						}
					],
					series: [{
						show: true,
						name: '',
						type: 'bar',
						barWidth: 5, // 柱子宽度
						barGap: '30%',
						showBackground: true,
						backgroundStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 1,
								y2: 1,
								colorStops: [{
										offset: 0,
										color: 'rgba(255, 255, 255, 1)'
									},
									{
										offset: 1,
										color: '#ccc'
									}
								]
							}
						},
						label: {
							show: true,
							offset: [5, -15],
							color: '#000',
							fontSize: 16,
							position: 'left',
							align: 'left',
							formatter: function (xAxis) {
								return xAxis.name
							}
						},
						itemStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 1,
								y2: 1,
								colorStops: [{
										offset: 0,
										color: '#3496FB'
									},
									{
										offset: 1,
										color: '#3496FB'
									}
								]
							}
						},
						data: data
					} ],
					dataZoom: [{
						yAxisIndex: [0, 1], // 这里是从X轴的0刻度开始
						show: false, // 是否显示滑动条，不影响使用
						type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
						startValue: 0, // 从头开始。
						endValue: 5, // 展示到第几个。
						moveOnMouseWheel: true, // 开启滚轮平移
						zoomOnMouseWheel: false, // 关闭滚轮缩放
						zoomLock: true // 是否只平移不缩放
					}]
				})
			}
    }
  }
  </script>

  <style  lang="less" scoped>
  .title {
    display: flex;
    flex-direction: column;
    .title_top {
      padding-bottom: 16px;
      border-bottom: 3px solid #f5f5f5;
      display: flex;
      flex-direction: row;
      font-size: 23px;
      font-family: PingFang SC;
      font-weight: 800;
      color: #2c2c2c;
      justify-content: space-between;
    }
    .title_num {
      margin-top: 25px;
      display: flex;
      padding: 10px 10%;
      flex-direction: row;
      justify-content: space-between;
      background: #e7e7e7;
      .title_num_item {
        display: flex;
        flex-direction: column;
        .title_num_item_top {
          font-size: 34px;
          font-family: DIN;
          font-weight: bold;
          color: #0072c6;
          text-align: center;
        }
        .title_num_item_bottom {
          font-size: 20px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #2c2c2c;
          text-align: center;
        }
      }
    }
  }

  ::v-deep .ant-tabs-tab-active {
    height: 45px;
    color: white;
    background: #0072c6;
    border-color: #0072c6;
  }

  ::v-deep .ant-tabs-tab {
    border-bottom-color: #0072c6;
    margin: 0px 10px 0px 0px;
    font-size: 16px;
  }

  ::v-deep .ant-tabs-bar {
    border-bottom: 1px solid #0072c6;
  }
  </style>
